<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('安全设置-修改手机号')">

</head>

<body>

<div th:replace="head :: header"></div>

<!-- 主体内容 -->
<div id="app" class="user_container clearfix">

    <!-- 左侧导航 -->
    <div th:replace="content/personal/left :: body"></div>

    <!-- 右侧内容 -->
    <div class="right_boxwrap">
        <div class="user_right_box">
            <div class="user_right_box_title" style="margin-bottom: 32px;">
                <div class="user_right_box_title_l">
                    <em></em>
                    <h3>安全设置</h3>
                </div>
            </div>
            <div class="set_password_box set_phone_box">
                <div class="set_phone_nav clearfix">
                    <div class="left">
                        <div class="juxing" style="background: #ff5722; color: #fff;">
                            <p>1.进行安全验证</p>
                        </div>
                        <em class="sanjiao" style="border-left:13px solid #ff5722;"></em>
                    </div>
                    <div class="center">
                        <div class="c_left">
                            <em class="weibu_top"></em>
                            <em class="weibu_bottom"></em>
                        </div>
                        <div class="juxing">
                            <p>2.设置新手机</p>
                        </div>
                        <em class="sanjiao"></em>
                    </div>
                    <div class="right">
                        <div class="c_left">
                            <em class="weibu_top"></em>
                            <em class="weibu_bottom"></em>
                        </div>
                        <div class="juxing">
                            <p>3.修改成功</p>
                        </div>
                    </div>
                </div>
                <form th:action="@{/personal/safe/modify-mobile/1}" method="post">
                    <table border="0" cellspacing="" cellpadding="" th:if="${error ne null}">
                        <tr>
                            <th>错误信息：</th>
                            <td class="right" style="color: #ff0000;" th:text="${error}"></td>
                        </tr>
                    </table>
                    <table border="0" cellspacing="" cellpadding="">
                        <tr>
                            <th>原手机号：</th>
                            <input type="hidden" class="mobile-for-sms-code" th:value="${currentUser.mobile}">
                            <td class="right" style="color: #333;" th:text="${currentUser.mobile}"></td>
                        </tr>
                    </table>
                    <table border="0" cellspacing="" cellpadding="">
                        <tr>
                            <th>验证码：</th>
                            <td class="password">
                                <input type="text" name="validateCode" id="validate_code" value=""/>
                            </td>
                            <td>
                                <div class="yzm_img">
                                    <img th:src="@{/api/validate_code}" onclick="this.src = '/api/validate_code'" style="width:100%; height:100%;">
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table border="0" cellspacing="" cellpadding="">
                        <tr>
                            <th>短信验证码：</th>
                            <td class="password">
                                <input type="text" name="smsCode" value=""/>
                            </td>
                            <td class="yz_btn">
                                <a class="get-sms-code" href="javascript:void(0)">获取验证码</a>
                            </td>
                        </tr>
                    </table>
                    <input type="submit" class="submit" name="" value="下一步"/>
                </form>
            </div>
        </div>
    </div>
</div>

<div th:replace="foot :: body"></div>

</body>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script>
    activeLeft('personal-safe');
</script>

</html>
